import React, { Component } from 'react'
import Navbar from '../navbar/navbar'
import { Route, Outlet } from 'react-router-dom'
import PropTypes from 'prop-types'
import Nofound from '@/views/common/nofound/nofound'
import styled from 'styled-components'
import Footer from '../footer/footer'
import {tabs} from '@/router/index'


const Container = styled.div`
  & {
    width: 100vw;
  }
`

export class DefaultRoute extends Component {
  
  constructor(props) {
    super(props)
  }
  
  render() {
    const showFooter = tabs.some(e => {
      return this.props.path === e.path
    })
    return (
      <Container>
        {this.props && this.props.useNav
        ? <Navbar attr={this.props.attr}></Navbar>
        : ''
        }
        {this.props && this.props.element}
        {
          showFooter? <Footer></Footer> : ''
        }
      </Container>
    )
  }
}
DefaultRoute.defaultProps = {
  title:'自定义标题',
  path: '/404',
  element: <Nofound />,
  useNav: true,
  field: ''
  
}

DefaultRoute.prototypes = {
  title: PropTypes.string.isRequired,
  path: PropTypes.string.isRequired,
  element: PropTypes.element,
  useNav: PropTypes.bool,
  field: PropTypes.string
}

export default DefaultRoute